<template>
  <view>
    <view v-for="(item, index) in list" :key="item.id">
      <radio :value="item.id" @click="changeSelect(item.id)">{{
        item.name
      }}</radio>
    </view>
    <button @click="addOne">添加一项</button>
    <button @click="reverseList">顺序反转</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: 1,
        },
        {
          id: 2,
          name: 2,
        },
      ],
    };
  },
  methods: {
    changeSelect(id) {
      const index = this.list.findIndex((item) => item.id === id);
      console.log(index);
    },
    addOne() {
      this.list.unshift({
        id: Date.now(),
        name: Date.now(),
      });
    },
    reverseList() {
      this.list = this.list.reverse();
    },
  },
};
</script>